<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/layui.css" media="all">

	<body>

		<div class="layui-form" style="margin-top: 10px;" id="searchId" lay-filter="searchId">
			<input type="hidden" name="test" value="10005" />

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">分数范围</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="score_min" placeholder="" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="score_max" placeholder="" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">类别</label>
					<div class="layui-input-block">
						<input type="text" name="classify" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">所在城市</label>
					<div class="layui-input-block">
						<select name="city" lay-filter="aihao">
							<option value="">请选择</option>
							<option value="城市-1">城市-1</option>
							<option value="城市-2" selected="">城市-2</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男" checked="">
						<input type="radio" name="sex" value="女" title="女">
					</div>
				</div>

			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn" onclick="searchF()">搜索</button>
					<button type="button" class="layui-btn layui-btn-primary" onclick="reset()">重置</button>
				</div>
			</div>
		</div>
		<table id="listTable" lay-filter="listTable"></table>


		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script src="js/layui.js"></script>
		<script src="js/layui_table.js"></script>
		<script src="js/layui_table_json.js"></script>
		<script>
			var grid = new LayDataTable();

			grid.init({
				elem: '#listTable',
				url:'https://www.layui.com/demo/table/user/',
				//height: 800,
				//data: resDt.data,
                defaultToolbar: ['filter', 'print', 'exports', 
				 {
				    title: 'wifi' //标题
				    ,layEvent: 'wifi' //事件名，用于 toolbar 事件中使用
				    ,icon: 'layui-icon-wifi' //图标类名
				 },
				 {
				     title: '授权' //标题
				     ,layEvent: 'auz' //事件名，用于 toolbar 事件中使用
				     ,icon: 'layui-icon-auz' //图标类名
				  }
				],
				toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
				//url: '/demo/table/user/', //数据接口				
				title: '用户表',
				//page: false, //默认是开启分页		
				totalRow: true, //开启合计行				
				cols: [
					[ //表头
						{
							field: 'id',
							title: 'ID',
							width: 80,
							sort: true,
							fixed: 'left',
							totalRowText: '合计：'
						}, {
							field: 'username',
							title: '用户名',
							width: 80
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							sort: true
						}, {
							field: 'city',
							title: '城市',
							width: 80
						}, {
							field: 'sign',
							title: '签名',
							width: 177
						}, {
							field: 'experience',
							title: '积分',
							width: 80,
							sort: true,
							totalRow: true
						}, {
							field: 'score',
							title: '评分',
							width: 80,
							sort: true,
							totalRow: true
						}, {
							field: 'classify',
							title: '职业',
							width: 80
						}, {
							field: 'wealth',
							title: '财富',
							width: 135,
							sort: true
						},
						{
							fixed: 'right',
							title: '操作',
							width: 165,
							align: 'center',
							toolbar: '#barDemo'
						}
					]
				]
			}, function(checkStatus, event) {
				console.log(checkStatus, event);
			}, function(obj) {
				console.log(obj);
			}, {
				searchId: "searchId"
			});


			//搜索的方法
			function searchF() {
				grid.search();
			}

			//重置
			function reset() {
				grid.reset();
			}
		</script>


	</body>
</html>


<script>

</script>
